<template>
  <div>
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center">
          <h2>Checkout</h2>
          <ul>
            <li><a href="index.html">home</a></li>
            <li class="active">Checkout</li>
          </ul>
        </div>
      </div>
    </div><!-- shopping-cart-area start -->
    <div class="checkout-area pt-95 pb-70">
      <div class="container">
        <h3 class="page-title">checkout</h3>
        <div class="row" style="left: 150px;position: relative">
          <div class="col-lg-9">
            <div class="checkout-wrapper">
              <div id="faq" class="panel-group">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h5 class="panel-title"><span>1</span>
                      <a data-toggle="collapse" data-parent="#faq" href="#payment-2">Basic information</a></h5>
                  </div>
                  <div id="payment-2" class="panel-collapse collapse">
                    <div class="panel-body">
                      <div class="billing-information-wrapper">
                        <div class="row">
                          <div class="col-lg-6 col-md-6">
                            <div class="billing-info"><label>Buyer Name</label>
                              <input type="text" id="firstName" v-model="newOrder.username" value="firstName"></div>
                          </div>
                          <div class="col-lg-6 col-md-6">
                            <div class="billing-select card-mrg"><label>Country</label>
                              <select v-model="newOrder.shipCountry">
                                <option value="China">China</option>
                                <option disabled value="America" selected="false">America(unsupported temporarily)</option>
                                <option disabled value="England">England(unsupported temporarily)</option>
                                <option disabled value="Germany">Germany(unsupported temporarily)</option>
                              </select></div>
                          </div>
                          <div class="col-lg-6 col-md-6">
                            <div class="billing-info" style="height: 10px;"><label>Address</label></div>
                              <v-region @values="regionChange"></v-region>

                          </div>
                          <div class="col-lg-6 col-md-6">
                            <div class="billing-info"><label>Detailed Address</label>
                              <input type="text" id="shippingAddress" v-model="newOrder.address" value="shippingAddress" >
                            </div>
                          </div>
                          <div class="col-lg-6 col-md-6">
                            <div class="billing-select card-mrg"><label>Courier</label>
                              <select v-model="newOrder.courier">
                                <option value="圆通">圆通</option>
                                <option value="顺丰">顺丰</option>
                                <option value="韵达">韵达</option>
                                <option value="邮政">邮政</option>
                              </select></div>
                          </div>

                          <div class="col-lg-6 col-md-6">
                            <div class="billing-info"><label>Telephone</label>
                              <input type="text" id="phone" v-model="newOrder.phone" value="phone"></div>
                          </div>
                          <div class="col-lg-6 col-md-6">
                            <div class="billing-select card-mrg">
                              <label>Pay Type</label>
                              <select v-model="newOrder.payType">
                                <option value="Alipay" checked="true">Alipay</option>
                                <option disabled value="WeChat Pay" >WeChat Pay(unsupported temporarily)</option>
                            </select>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h5 class="panel-title"><span>2</span>
                      <a data-toggle="collapse" data-parent="#faq" href="#payment-6">Order Review</a></h5>
                  </div>
                  <div id="payment-6" class="panel-collapse collapse">
                    <div class="panel-body">
                      <div class="order-review-wrapper">
                        <div class="order-review">
                          <div class="table-responsive">
                            <table class="table">
                              <thead>
                              <tr>
                                <th class="width-1">Product Name</th>
                                <th class="width-2">Unit Price</th>
                                <th class="width-3">Quantity</th>
                                <th class="width-4">Total Price</th>
                              </tr>
                              </thead>
                              <tbody>
                              <tr v-for="order in newOrderList">
                                <td>
                                  <div class="o-pro-dec">
                                    <p>{{order.iName}}</p>
                                  </div>
                                </td>
                                <td>
                                  <div class="o-pro-price">
                                    <p>${{order.listPrice}}</p>
                                  </div>
                                </td>
                                <td>
                                  <div class="o-pro-qty">
                                    <p>{{order.qty}}</p>
                                  </div>
                                </td>
                                <td>
                                  <div class="o-pro-subtotal">
                                    <p>${{order.total}}</p>
                                  </div>
                                </td>
                              </tr>
                              </tbody>
                              <tfoot>
                              <tr>
                                <td colspan="3">Total Price :</td>
                                <td colspan="1">${{newOrder.totalPrice}}</td>
                              </tr>
                              </tfoot>
                            </table>
                          </div>
                          <div class="billing-back-btn"><span> Forgot an Item?
                            <router-link to="/cart/cart">Edit Your Cart.</router-link></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="billing-btn"><button type="submit" @click="pay">Pay</button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import viewNewOrder from "../../../static/js/pet/viewNewOrder";
export default {
  ...viewNewOrder
}
</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";
@import "../../../static/css/responsive.css";
</style>
